<template>
  <div class="main">
    <div class="title">我的推荐码</div>
    <div class="code-wrapper" v-if="code">
      <image class="code" :src="code" mode="widthFix"></image>
    </div>
    <button plain="true" class="save" @click="save(code)">保存</button>
    <view class="title"> 推广说明 </view>
    <view class="text-list" v-for="(item, index) in textlist" :key="index">
      <view class="circle"></view>
      <view class="test">{{ item.text }}</view>
    </view>
  </div>
</template>
<script lang="ts">
import { getQrCode } from "@/api/invite";
import { listUnit } from "@/api/unit";
import { UnitPrice } from "@/typings";
import Vue from "vue";

export default Vue.extend({
  data() {
    return {
      code: "",
      textlist: [{ text: "您每邀请一个用户就会获得一定的奖励" }],
    };
  },
  onLoad() {
    this.getCode();
    listUnit({ type: "佣金", pageNum: 1, pageSize: 100 }).then((res) => {
      const units = res.list as UnitPrice[];
      for (const unit of units) {
        this.textlist.push({
          text: `邀请人数在${unit.first}和${unit.end}之间，每邀请一个人奖励${unit.renewalPrice}￥`,
        });
      }
    });
    listUnit({ type: "抽成", pageNum: 1, pageSize: 10 }).then((res) => {
      const unit = res.list[0] as UnitPrice;
      this.textlist.push({
        text: `您邀请的用户下单并确认收货后，我们会从中抽取${
          100 * unit.firstPrice
        }%作为奖励`,
      });
    });
  },
  methods: {
    getCode() {
      getQrCode().then((res) => {
        console.log(res);
        this.code = res;
      });
    },
    save(url: string) {
      uni.showModal({
        title: "保存图片",
        content: "是否确认保存到相册",
        success: (res) => {
          if (res.confirm) {
            uni.downloadFile({
              //获得二维码的临时地址
              url: url,
              success: (res) => {
                if (res.statusCode == 200) {
                  uni.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath, //传入临时地址
                    success: () => {
                      uni.showToast({ title: "已保存到相册", icon: "success" });
                    },
                    fail: () => {},
                  });
                }
              },
            });
          }
        },
      });
    },
  },
});
</script>
<style lang="scss" scoped>
.text-list {
  display: flex;
  align-items: center;
  view:last-child {
    font-size: 24rpx;
    color: #999999;
    margin-left: 6rpx;
    margin-top: 10rpx;
  }
  .circle {
    width: 13rpx;
    height: 13rpx;
    background: #3988f9;
    border-radius: 50%;
    margin-right: 10rpx;
  }
}
.main {
  border-radius: 15rpx;
  margin: 0 20rpx;
  padding: 20rpx;
  .title {
    margin-top: 100rpx;
    margin-bottom: 50rpx;
    font-size: 34rpx;
    font-weight: bold;
    color: rgba($color: #000000, $alpha: 0.9);
  }
  .code-wrapper {
    width: 100%;
    text-align: center;
    .code {
      width: 400rpx;
    }
  }
  .save {
    width: 300rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    margin-top: 50rpx;
    margin-bottom: 30rpx;
    border: 0;
    color: white;
    box-shadow: 10rpx 10rpx 15rpx rgb(245, 245, 245);
    background-color: rgb(0, 170, 255);
  }
}
</style>
